import React, { useEffect, useInsertionEffect, useState } from "react";
import { useLayoutEffect } from "react";

//React.memo用来缓存一个组件用的，只有当前组件内容发生变化才会重新渲染,
// 但如果传过来的函数被父组件重新渲染定义，又会触发子组件重新渲染
const Child = React.memo((props) => {
  console.log("child被执行");

  return (
    <>
      <h1>Child------{props.name}</h1>
      <button onClick={() => props.changeName("hhhh")}>修改名字</button>
    </>
  );
});

//app重新渲染会是changeName重新创建导致儿子被调用
function App() {
  const [count, setCount] = useState(100);
  const [name, setName] = useState("张三");
  // 1.先定义接收方法
  function changeName(value) {
    setName(value);
  }

  return (
    <div>
      <h1 id="title">APP</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        {count}
      </button>

      {/* <button
        onClick={() => {
          setName("lisi");
        }}
      >
        点击修改名字
      </button> */}
      <hr></hr>
      <Child name={name} changeName={changeName}></Child>
      {/* count变化会导致child自己被重新渲染，但count与child无关联，
      造成资源浪费，让无关组件无需重新渲染
      */}
    </div>
  );
}

export default App;
